<template>
  <div id="app">
   <div class="todo-container">
    <div class="todo-wrap">
      <Header :addTodo='addTodo'/>
      <List :todoList='todoList' :radioHandle='radioHandle'  :deleteList='deleteList' />
      <Footer :todoList='todoList' :checkAllHandle='checkAllHandle' :deleteAllList='deleteAllList'/>
    </div>
  </div>
  </div>
</template>

<script>
import { nanoid } from 'nanoid'

import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
export default {
  name: 'App',
  data(){
    return{
      todoList:[
        {id:nanoid(),thing:'唱歌',done:false},
        {id:nanoid(),thing:'跳舞',done:true},
        {id:nanoid(),thing:'rap',done:false},
        {id:nanoid(),thing:'篮球',done:false}
      ]
    }
  },
  components: {
    Header,
    List,
    Footer
  },
  methods: {
    addTodo(newTodo){
      this.todoList.push(newTodo)
    },

    //单选逻辑，只需要获取到item的id，函数在app父级身上
    radioHandle(rid){
      //拿到id后，遍历原数组，拿到每个值，对比id，然后如果id相等,。。。展开原数组，让done属性取反，返回一个新数组重新赋值，如果不等，返回原数组，这里一句话省略item
     this.todoList = this.todoList.map((item)=> item.id === rid ?  {...item,done:!item.done} : item)
    },
    //点击删除按钮的逻辑
    deleteList(did){
      // console.log(did);
      //过滤，返回数组中不等于穿过来id的数据
      //重新赋值
      const popup = confirm('你确定要删除吗')
      //放popup为false直接return
      if(!popup) return
     this.todoList = this.todoList.filter((item)=> item.id !== did )
    },

    //点击全选的逻辑
    checkAllHandle(che){
       //把所有的done全部修改,要确保按钮的checked绑定了done数据
      this.todoList= this.todoList.map((item) => ({
        ...item,
        done: che,
      }));
    },

    //点击全部删除逻辑
    deleteAllList(){
      this.todoList = this.todoList.filter((item)=> !item.done)
    }
  },
}
</script>

<style>
/*base*/
body {
  background: #fff;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}


</style>
